import React, {Component, Fragment, lazy, Suspense} from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import {IRouter} from "../typing/router";
import {Router} from "../router/router";
const Home = lazy(()=>import("../pages/home"));

function View() {


    const generatorRouter=(routerList : IRouter[])=>{
        return (
            <>
                {
                    routerList.map(r=>{
                        if (r.children){
                            return (
                                <Fragment key={r.key}>
                                    {generatorRouter(r.children)}
                                </Fragment>
                            )
                        }else {
                            return (
                                <Route key={r.key} path={r.path} element={r.component} />
                            )
                        }
                    })
                }
            </>
        )
    }


    return (
        <Suspense fallback={<>...</>}>
            <BrowserRouter>
                <Routes key={"main"}>
                    <Route path={"/"} element={<Home />}></Route>
                    {generatorRouter(Router)}
                </Routes>
            </BrowserRouter>
        </Suspense>

    );
}

export default View;
